//创建路由器并暴露

//（1）引入路由器
import { createRouter, createWebHistory } from 'vue-router';
//引入可能要呈现的组件
import Home from "@/pages/Home.vue";
import About from "@/pages//About.vue";
import News from "@/pages//News.vue";
import Detail from '@/pages/Detail.vue'
// （2）创建路由器
const router = createRouter({
    history:createWebHistory(), //路由器的工作模式，必须要写
    routes:[ //一个一个的路由规则
      {
        name:'zhuye',
        path:'/home',//路径，写在地址栏路径的后面
        component:Home//相应vue组件
      },
      {
        name:'xinwen',
        path:'/news',
        component:News,
        children:[
          {
            name:'xiang',
            path:'detail/:id/:title/:content',//子路径不用加/
            component:Detail,
            props:true//把路由参数映射到组件的props参数中
  
            // 第一种写法：将路由收到的所有params参数作为props传给路由组件
            // props:true,
  
            // 第二种写法：函数写法，可以自己决定将什么作为props给路由组件
            // props(route){
            //   return route.query
            // }
  
            // 第三种写法：对象写法，可以自己决定将什么作为props给路由组件
            /* props:{
              a:100,
              b:200,
              c:300
            } */
          }
        ]
      },
      {
        name:'guanyu',
        path:'/about',
        component:About
      },
      {
        path:'/',
        redirect:'/home'
      }
    ]
  })

// 暴露router
export default router//把11-56行代码暴露出去